<script setup lang="ts">
import { useMessage } from 'naive-ui'
const $message = useMessage()
const formRef = ref()
const count = ref(10)
const arr = ref([])
const form = reactive({
  name: '',
  age: '',
  desc: '',
  sex: ''
})
const formRule = {
  name: [{
    required: true,
    message: '姓名必须填写'
  }]
}
const sexOptions = [
  { label: '男', value: 'nan' },
  { label: '女', value: 'nv' },
]

function handleSubmit() {
  formRef.value?.validate((err:any) => {
    if (!err) {
      $message.success('提交成功')
    } else {
      $message.warning('验证失败')
    }
  })
}
</script>

<template>
  <my-comp message="aaa" :age="4"></my-comp>
  <h3>unoCss的应用</h3>
  <div w100px h100px bg-red>

  </div>
  <div i-mdi-light:bank text-100px color-green></div>
  <pre>
    属性模式
    <\div i-custom:logo w100px h100px bg="#f00/50" />
  </pre>
  <div i-custom:logo w100px h100px bg="#f00/50"></div>
  <pre>
    class模式
    <\div class="i-custom:logo w100px h100px bg-#f00/50" />
  </pre>
  <div class="i-custom:logo w100px h100px bg-#f00/50"></div>
  <div>
    count: {{ count }}
  </div>
  <h3>naiveUI的应用</h3>
  <div w500px mx-10px p20px border-1 border-solid border-blue rounded>
    <h5>表单</h5>
    <n-form ref="formRef" :model="form" :rules="formRule">
      <n-form-item path="name" label="姓名">
        <n-input v-model:value="form.name" clearable />
      </n-form-item>
      <n-form-item label="年龄">
        <n-input-number v-model:value="form.age" />
      </n-form-item>
      <n-form-item label="性别">
        <n-select :options="sexOptions" v-model:value="form.sex" />
      </n-form-item>
      <n-form-item label="简介">
        <n-input type="textarea" v-model:value="form.desc" />
      </n-form-item>
    </n-form>
    <n-button type="primary" @click="handleSubmit">提交</n-button>
  </div>
</template>
